<template>
  <div class="shopcart">
    <!-- 购物车头部 -->
    <div class="shopcart-card">
      <!-- 头部样式 -->
      <div class="card-header">
        <span class="header-left"
          >购物车(全部{{ shopCart.ischeckedNumber }})</span
        >
        <div class="header-right">
          <span>已选商品(不含运费)&nbsp {{ shopCart.shopAllPrice }}</span>
          <button
            class="header-btn"
            @click="toTrade"
            :disabled="!shopCart.ischeckedNumber"
          >
            结&nbsp;算
          </button>
        </div>
      </div>
      <!-- 商品属性 -->
      <div class="shopcart-main">
        <div class="main-type">
          <div class="main-th1">
            <input
              type="checkbox"
              :checked="shopCart.isAllChecked"
              @input="shopCart.AllisCheckCart(1 - shopCart.isAllChecked)"
            />
            <span>全选</span>
          </div>
          <div class="main-th2">商品信息</div>
          <div class="main-th3">单价</div>
          <div class="main-th4">数量</div>
          <div class="main-th5">金额</div>
          <div class="main-th6">操作</div>
        </div>
      </div>
      <!-- 商品信息 -->
      <div
        v-if="shopCart.shopCartList"
        class="cart-body"
        v-for="shop in shopCart.shopCartList"
        :key="shop.id"
      >
        <ul class="cart-list">
          <li class="cart-list-con1">
            <input
              type="checkbox"
              name="chk_list"
              :checked="!!shop.isChecked"
              @change="shopCart.updatedShop(shop.skuId, 1 - shop.isChecked)"
            />
          </li>
          <li class="cart-list-con2">
            <img :src="shop.imgUrl" />
            <span class="item-msg">
              {{ shop.skuName }}
            </span>
          </li>
          <li class="cart-list-con3">
            <span class="price">{{ shop.cartPrice }}</span>
          </li>
          <li class="cart-list-con4">
            <div class="controls">
              <input
                autocomplete="off"
                class="itxt"
                :value="shop.skuNum"
                @blur="blurHandle(shop.skuId, shop.skuNum, $event)"
              />
              <button
                class="plus"
                @click="updateShopCart(shop.skuId, 1)"
                :disabled="shop.skuNum === max"
              >
                +
              </button>
              <button
                class="mins"
                @click="updateShopCart(shop.skuId, -1)"
                :disabled="shop.skuNum === min"
              >
                -
              </button>
            </div>
          </li>
          <li class="cart-list-con5">
            <span class="sum">{{ shop.skuPrice * shop.skuNum }}</span>
          </li>
          <li class="cart-list-con6">
            <a class="sindelet">移入收藏夹</a><br />
            <a class="sindelet" @click="shopCart.deleteShop(shop.skuId)"
              >删除</a
            >
            <br />
          </li>
        </ul>
      </div>
      <div v-else style="height:20%;text-align: center;">
        <ul>
          <li>
            <h1>购物车暂无商品！！！</h1>
          </li>
        </ul>
      </div>
      <div class="card-footer">
        <div class="footer-th1">
          <input
            type="checkbox"
            :checked="shopCart.isAllChecked"
            @change="shopCart.AllisCheckCart(1 - shopCart.isAllChecked)"
          />
          <span>全选</span>
        </div>
        <div class="footer-th2">
          <span @click="shopCart.AllDeleteShopCart">删除已选商品</span>
        </div>
        <div class="footer-th3">
          <span>移入收藏夹</span>
        </div>
        <div class="footer-th4">
          <span>已选商品&nbsp;{{ shopCart.ischeckedNumber }}&nbsp;件</span>
        </div>
        <div class="footer-th5">
          <span>合计(不含运费)：{{ shopCart.shopAllPrice }}</span>
          <button
            class="footer-btn"
            @click="toTrade"
            :disabled="!shopCart.ischeckedNumber"
          >
            结算
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "ShopCart",
};
</script>

<script lang="ts" setup>
import * as _ from "lodash";
// import debounce from "lodash/debounce";
import { onMounted, ref, onUnmounted } from "vue";
import { useShopCartStore } from "@/stores/shopcart";
import { useRouter } from "vue-router";
const router = useRouter();
const min = ref(1);
const max = ref(20);
const shopCart = useShopCartStore();
onMounted(() => {
  shopCart.getShopCartList();
});

//防抖函数
// const updateShopCart = _.debounce(function (skuId, skuNum) {
//   // console.log(111);
//   shopCart.getAddShopCart(skuId, skuNum);
//   // @input="updateShopCart(shop.skuId, ($event as any) - shop.skuNum)"

// }, 200);
//防抖函数
const updateShopCart = _.debounce(click, 400, {
  leading: false, //延长开始后调用
  trailing: true, //延长结束前调用
});
function click(skuId: number, skuNum: number) {
  // console.log("防抖执行");
  shopCart.getAddShopCart(skuId, skuNum);
}
//移除组件时，取消防抖
onUnmounted(() => {
  updateShopCart.cancel();
});
const blurHandle = (skuId: number, skuNum: number, e: any) => {
  // console.log(skuId, skuNum, e.target.value);
  //失去焦点后 输入框的值减去当前的值
  shopCart.getAddShopCart(skuId, e.target.value - skuNum);
};
//跳转至提交订单页
const toTrade = () => {
  // router.push("/order");
  router.push({
    name: "Trade",
  });
};
</script>

<style lang="less" scoped>
.shopcart {
  display: flex;
  justify-content: center;
  width: 100%;
  // border: 1px solid black;
  margin: 100px auto;
  background-color: rgba(234, 232, 235);

  .shopcart-card {
    border-radius: 20px;
    margin: 20px 0;
    background-color: white;
    // min-height: 400px;
    width: 1200px;
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    border-bottom: 1px solid #ccc;
    padding: 0 20px;
  }
  .card-header .header-left {
    font-weight: bold;
    font-size: 18px;
  }
  .card-header .header-right {
    font-size: 15px;
  }
  .card-header .header-right .header-btn {
    height: 45px;
    width: 75px;
    border-radius: 30px;
    border: none;
    margin-left: 10px;
    background-color: orange;
    color: #fff;
    font-size: 18px;
    &:disabled {
      background-color: #ccc;
    }
  }
  .shopcart-main .main-type {
    //清除浮动
    // &::after {
    //   display: block;
    //   content: "";
    //   clear: both;
    // }
    height: 15px;
    overflow: hidden;
    margin: 20px;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    & > div {
      float: left;
    }
    .main-th1 {
      // text-align: center;
      width: 12%;
      input {
        vertical-align: middle;
      }
      span {
        vertical-align: middle;
      }
    }
    .main-th2 {
      width: 43%;
    }
    .main-th3,
    .main-th4 {
      width: 10%;
    }
    .main-th5 {
      width: 15%;
    }
    .main-th6 {
      width: 10%;
    }
  }
  .cart-body {
    margin: 40px;
    background-color: #eee;
    border-radius: 20px;
    .cart-list {
      padding: 10px;
      overflow: hidden;
      & > li {
        float: left;
      }
      .cart-list-con1 {
        width: 3%;
      }
      .cart-list-con2 {
        width: 52%;
        img {
          width: 70px;
          height: 70px;
          float: left;
        }
        .item-msg {
          float: left;
          width: 200px;
          margin: 0 10px;
          line-height: 18px;
        }
      }
      .cart-list-con3 {
        width: 10%;
      }
      .cart-list-con4 {
        width: 12%;
        .controls {
          width: 48px;
          position: relative;
          float: left;
          margin-right: 15px;

          .itxt {
            width: 38px;
            height: 37px;
            border: 1px solid #ddd;
            color: #555;
            float: left;
            border-right: 0;
            text-align: center;
          }

          .plus,
          .mins {
            width: 15px;
            text-align: center;
            height: 17px;
            line-height: 17px;
            background: #f1f1f1;
            color: #666;
            position: absolute;
            right: -8px;
            border: 1px solid #ccc;
            &:disabled {
              color: #c0c4cc;
              cursor: not-allowed;
            }
          }

          .mins {
            right: -8px;
            top: 19px;
            border-top: 0;
          }

          .plus {
            right: -8px;
          }
        }
      }
      .cart-list-con5 {
        width: 13%;

        .sum {
          font-size: 14px;
        }
      }

      .cart-list-con6 {
        width: 10%;

        a {
          color: #666;
        }
      }
    }
  }
  .card-footer {
    height: 80px;
    line-height: 80px;
    // text-align: center;
    border-top: 1px solid #ccc;
    overflow: hidden;
    font-size: 14px;
    width: 1200px;
    // position: fixed;
    // z-index: 999;
    // bottom: 0px;
    background-color: white;
    & > div {
      float: left;
    }
    .footer-th1 {
      text-align: center;
      width: 10%;
      font-weight: bold;
    }
    .footer-th2 {
      width: 10%;
    }
    .footer-th3 {
      width: 45%;
    }
    .footer-th4 {
      width: 10%;
    }
    .footer-th5 {
      width: 20%;
      .footer-btn {
        height: 45px;
        width: 75px;
        border-radius: 30px;
        border: none;
        margin-left: 10px;
        background-color: orange;
        color: #fff;
        font-size: 18px;
        &:disabled {
          background-color: #ccc;
        }
      }
    }
  }
}
</style>
